<template>
  <layout title="numberBox步进输入">
    <layout-content title="基础使用">
      <tn-number-box v-model="numberBoxValue"></tn-number-box>
      <view class="tn-margin-top-sm">
        <tn-number-box v-model="stepNumberBoxValue" :step="2"></tn-number-box>
      </view>
      <view class="tn-margin-top-sm">
        <tn-number-box v-model="stepDecimalNumberBoxValue" :step="0.1"></tn-number-box>
      </view>
      <view class="tn-margin-top-sm">
        <tn-number-box v-model="minNumberBoxValue" :min="100" :max="200"></tn-number-box>
      </view>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-number-box v-model="numberBoxValue" bg-color="tn-bg-gray"></tn-number-box>
      <view class="tn-margin-top-sm">
        <tn-number-box v-model="numberBoxValue" bg-color="tn-bg-gray" color="tn-color-gray--dark"></tn-number-box>
      </view>
    </layout-content>

    <layout-content title="设置尺寸">
      <tn-number-box v-model="numberBoxValue" input-width="100" input-height="36"></tn-number-box>
    </layout-content>

    <layout-content title="禁止输入">
      <tn-number-box v-model="numberBoxValue" disabled-input></tn-number-box>
    </layout-content>

    <layout-content title="禁止操作">
      <tn-number-box v-model="numberBoxValue" disabled></tn-number-box>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnNumberBox from '@/tuniao-ui/components/tn-number-box/src/NumberBox.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// numberBox的值
let numberBoxValue = ref<number>(0)
let stepNumberBoxValue = ref<number>(0)
let stepDecimalNumberBoxValue = ref<number>(0)
let minNumberBoxValue = ref<number>(0)
</script>

<style lang="scss" scoped>
</style>
